<template>
    <el-row>
        <el-col :span="24" class="col">
            <el-row style="margin: 10px;">
                <el-col :span="7">状态：
                    <el-button-group class="ml-4">
                        <el-button :type="xuanzhong == 0 ? 'primary' : 'default'" @click="fenlie(0)">全部商品</el-button>
                        <el-button :type="xuanzhong == 1 ? 'primary' : 'default'" @click="fenlie(1)">上架中</el-button>
                        <el-button :type="xuanzhong == 2 ? 'primary' : 'default'" @click="fenlie(2)">已下架</el-button>
                    </el-button-group>
                </el-col>
                <el-col :span="6">商品名称：<el-input v-model="search.name" placeholder="请输入商品名称" clearable /></el-col>
                <el-col :span="6">所属门店：<el-input v-model="search.phone" placeholder="请输入门店名称"
                        clearable></el-input></el-col>
                <el-row :span="24">
                    <el-col :span="23">发布时间:
                        <el-date-picker v-model="search.time" type="daterange" range-separator="至"
                            start-placeholder="起始日期" end-placeholder="终止日期" />
                    </el-col>
                    <el-col :span="1"><el-button type="primary"
                            @click="sousuo(search.name, search.phone, search.time)">搜索</el-button></el-col>
                </el-row>
            </el-row>
        </el-col>
    </el-row>
    <el-col :span="24" class="col">
        <el-table :data="areaList" border>
            <el-table-column prop="goodsId" label="商品ID" align="center" label-class-name="header"></el-table-column>
            <el-table-column prop="goodsName" label="商品" align="center" label-class-name="header"></el-table-column>
            <el-table-column prop="goodsShopName" label="所属门店" align="center"
                label-class-name="header"></el-table-column>
            <el-table-column prop="goodsSalesVolume" label="销量" align="center"
                label-class-name="header"></el-table-column>
            <el-table-column prop="goodsPresentPrice" label="预估价" align="center"
                label-class-name="header"></el-table-column>
            <el-table-column prop="addTime" label="发布时间" align="center" label-class-name="header"></el-table-column>
            <el-table-column prop="goodsStatus" label="状态" align="center" label-class-name="header">
                <template #default="item">
                    <el-button type="success" style="background-color: #e7faf0;" text
                        v-if="item.row.goodsStatus == 1">上架</el-button>
                    <el-button type="danger" style="background-color: #ffeded;" text v-else>下架</el-button>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" label-class-name="header">
                <template #default="item">
                    <el-button type="text" v-if="item.row.goodsStatus == 1"
                        @click="chaozhuo(item.row)">下架</el-button>
                    <el-button type="text" v-else @click="chaozhuo(item.row)">上架</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-col>
</template>

<script setup>
import { reactive, onMounted, ref } from 'vue';
// import TianJiaYiZhan from './components/yizhan/TianJiaYiZhan.vue';
import axios from 'axios';
let res = null;
// let title = ref("");
// let show = ref(false);
// let mendian = ref({});

let areaList = ref([]);
let xuanzhong = ref(0);
// const edite = function (item) {
//     console.log(item);

// }
// const xiajia = function (item) {
//     console.log(item);

// }

const fenlie = async function (index) {
    xuanzhong.value = index;
    if(index == 0){
        res =await axios.get(`http://43.143.190.87:8091/panghudaojiaBackend/goods/querySearchShopGoodsList?pageNum=1&pageSize=10&goodsName=&goodsStatus=&shopName=&startTime=&endTime=`)
    areaList.value = res.data.data.list.map(item => {
        // item.address = item.communityProvince + item.communityCity + item.communityDistrict;
        return item;
    }); 
    }else if(index == 1){
        res =await axios.get(`http://43.143.190.87:8091/panghudaojiaBackend/goods/querySearchShopGoodsList?pageNum=1&pageSize=10&goodsName=&goodsStatus=1&shopName=&startTime=&endTime=`);
        console.log(res);
    areaList.value = res.data.data.list.map(item => {
        // item.address = item.communityProvince + item.communityCity + item.communityDistrict;
        return item;
    }); 
    }else {
        res =await axios.get(`http://43.143.190.87:8091/panghudaojiaBackend/goods/querySearchShopGoodsList?pageNum=1&pageSize=10&goodsName=&goodsStatus=0&shopName=&startTime=&endTime=`)
    areaList.value = res.data.data.list.map(item => {
        // item.address = item.communityProvince + item.communityCity + item.communityDistrict;
        return item;
    }); 
    }
    
    
}

const search = reactive({
    nmae: null,
    time: null,
    phone: null
});

const chaozhuo = async function (item) {
    await axios.post("http://43.143.190.87:8091/panghudaojiaBackend/goods/modifyShopGoods",{
    "goodsId": item.goodsId,
    "goodsStatus": 1-item.goodsStatus
});
areaList.value = areaList.value.map((index)=>{
    if(item.goodsId==index.goodsId)index.goodsStatus=1-index.goodsStatus;
    return index;
})
}


const timeFun = (time) => {
    var d = time ? new Date(time) : new Date();
    var year = d.getFullYear();
    var month = d.getMonth() + 1;
    var day = d.getDate();
    var hours = d.getHours();
    var min = d.getMinutes();
    var seconds = d.getSeconds();

    if (month < 10) month = "0" + month;
    if (day < 10) day = "0" + day;
    if (hours < 0) hours = "0" + hours;
    if (min < 10) min = "0" + min;
    if (seconds < 10) seconds = "0" + seconds;
    return year + "-" + month + "-" + day + " " + hours + ":" + min + ":" + seconds;
}

const sousuo = async function (name, phone, time) {
    let starTime = ""
    let endTime = ""
    if (time != null) {
        starTime = timeFun(time[0]);
        endTime = timeFun(time[1]);
    }
    res = await axios.get(`http://43.143.190.87:8091/panghudaojiaBackend/goods/querySearchShopGoodsList?pageNum=1&pageSize=10&goodsName=${name}&goodsStatus=&shopName=${phone}&startTime=${starTime}&endTime=${endTime}`)
    areaList.value = res.data.data.list.map(item => {
        // item.address = item.communityProvince + item.communityCity + item.communityDistrict;
        return item;
    });
    console.log(res);
}


//组件首次挂载结束（通常代表组件首次加载）
onMounted(async function () {
    res = await axios.get("http://43.143.190.87:8091/panghudaojiaBackend/goods/querySearchShopGoodsList?pageNum=1&pageSize=10&goodsName=&goodsStatus=&shopName=&startTime=&endTime=");
    console.log(res);
    areaList.value = res.data.data.list.map(item => {
        // item.shopAddress = item.shopLongitude + item.shopLatitude;
        return item;
    });
})



</script>

<style lang="less" scoped>
.title:hover {
    color: #10d0d6;
}

.title {
    margin-left: 10px;
    margin-bottom: 30px;
}

.el-row {
    margin: 10px;
}

.el-input {
    width: 180px;
    height: 35px;
}

/deep/.header {
    background-color: #1890ff !important;
    color: white;
}
</style>